<template>
  <div class="card">
    <h2>物流信息</h2>
    <div><span>{{ status }}</span><span>{{ logisticsCompany }}</span><span>{{ logisticsNo }}</span></div>
    <ul>
      <li v-for="(item, index) in logisticsInfo" :key="index">
        <div>
          <span>{{ item.time.split(' ')[0] }}</span><br>
          <span>{{ item.time.split(' ')[1] }}</span>
        </div>
        <span>{{ item.content }}</span>
      </li>
    </ul>
    <button>查看物流详情</button>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  props: ['logisticsInfo',
    'logisticsStatus', // 状态
    'logisticsCompany', // 快递公司
    'logisticsNo' // 快递运单号
  ],
  computed: {
    status() {
      if (this.logisticsStatus == 0) {
        return '未发货'
      } else if (this.logisticsStatus == 1) {
        return '已发货'
      } else if (this.logisticsStatus == 2) {
        return '已签收'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.card h2 {
  color: #007bff;
  font-size: 18px;
  margin-top: 0;
}

.card {
  &>div {
    margin-top: 10px;

    & span:first-child {
      font-size: 18px;
      color: #007BFF;
    }

    & span:nth-child(2) {
      margin: 0 16px;
    }
  }

  ul {
    margin-top: 13px;
    width: 100%;
  }

  li {
    padding-left: 10px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    text-align: right;
    margin: 10px 0;

    div {
      margin-right: 15px;
      width: 120px;
    }

    div span {
      color: #666;
    }

    &>span {
      // width: 200px;
      text-align: left;
      width: 100%;
    }
  }

  button {
    background-color: #007BFF;
    color: white;
    width: 120px;
    height: 36px;
    border: 0;
    font-size: 16px;
    box-sizing: content-box;
    border-radius: 5px;
  }

    button:hover {
      background-color: #2a83e2;
    }
}
</style>

<style>
body {
  height: 2000px;
}
</style>